<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>HELLO，AMAP!</title>
    <style>
        html,
        body,
        #container {
            width: 1000px;
            height: 1000px;
        }

        #tianQi {
            width: 200px;
            height: 360px;
            background-color: bisque;
            position: absolute;
            top: 200px;
            left: 100px;
            z-index: 10;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "de7b39ac3a36a97c9e8b68e441814204",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>

    <script type="text/javascript">

        // 接收天气
        let lives;
        // 地图
        AMapLoader.load({
            key: "ca8d114e57eeb67bc21c5729de186f24", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                // 天气

                const map = new AMap.Map("container", {
                    viewMode: '2D', //默认使用 2D 模式
                    zoom: 11, //地图级别
                    center: [113.383385, 34.7866], //地图中心点
                });
                const infoWindow = new AMap.InfoWindow({
                    //创建信息窗体
                    isCustom: true, //使用自定义窗体
                    content:
                        ` 
                               
                    `, //信息窗体的内容可以是任意html片段
                    offset: new AMap.Pixel(16, -45),


                });



                const onMarkerClick = function (e) {
                    infoWindow.open(map, e.target.getPosition()); //打开信息窗体
                    //e.target就是被点击的Marker
                };
                const marker = new AMap.Marker({
                    position: [113.383385, 34.7866],
                });
                map.add(marker);
                marker.on("click", onMarkerClick); //绑定click事件
                $.ajax({
                    type: `GET`,
                    url: `https://restapi.amap.com/v3/weather/weatherInfo?parameters`,
                    data: {
                        key: `e1f9a25a343a0947181c1b0912afcb81`,
                        city: 410182,
                        extensions: `base`,
                        output: `JSON`
                    },
                    dataType: `JSON`,
                    success: (e) => {
                        lives = e.lives[0]
                        $(`body`).append(`
                            <div id="tianQi">
                                   <h3>实时天气</h3>
                                   <hr>
                                   <p>城市/区:${lives.city}</p>
                                   <p>天气:${lives.weather}</p>
                                   <p>温度:${lives.temperature}℃</p>
                                   <p>风向:${lives.winddirection}</p>
                                   <p>风力:${lives.windpower}</p>
                                   <p>空气湿度:${lives.temperature_float}</p>
                                   <p>发布时间:${lives.reporttime}</p>
                               </div>
                        `)
                        console.log(lives);

                    },
                    error: (a) => {

                    }
                })

            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });
    </script>

</body>

</html>